<!-- 跟踪转运 -->
<template>
    <div class="container-box">
        <div class="left">
            <div class="box">
                <span class="name">转运记录</span>
                <div class="content">
                    <span><label for="">转运方式：</label><span> {{ TrackDeatil.transferMode }} </span></span>
                    <span><label for="">备注：</label><span> {{ TrackDeatil.notes }} </span></span>
                    <span><label for="">转运人：</label><span> {{ TrackDeatil.forwarderName }} </span></span>
                    <span><label for="">联系电话：</label><span> {{ TrackDeatil.forwarderPhone }} </span></span>
                    <span><label for="">转运上报时间：</label><span> {{ timeType(TrackDeatil.reportingTime) }}
                        </span></span>
                </div>

            </div>
            <div class="box">
                <span class="name">隔离接收记录</span>
                <div class="content">
                    <span><label for="">接收人：</label><span> {{ Receiving.recipient }} </span></span>
                    <span><label for="">接收时间：</label><span> {{ timeType(Receiving.receivingTime) }}
                        </span></span>
                    <span><label for="">隔离点：</label><span> {{ Receiving.quarantineSites }} </span></span>
                    <span><label for="">备注：</label><span> {{ Receiving.notes }} </span></span>
                </div>
            </div>
            <div class="box">
                <span class="name">采样检测记录</span>
                <div class="content">
                    <div>
                        <el-table :data="Sampling" border style="width: 80%;margin-bottom: 20px; " :show-header="false"
                            :header-cell-style="{ background: '#f9f9f9', color: '#606266', height: '80px' }">
                            <el-table-column align="right" prop="title" label="名称" class="backgroundColor" />
                            <el-table-column align="center" prop="content" label="内容" />
                        </el-table>
                    </div>

                </div>
            </div>
        </div>
        <div class="split"></div>

        <div class="right">
            <div class="box">
                <span class="name">解除隔离记录</span>
                <div class="content">
                    <span><label for="">解除隔离人：</label><span> {{ Deisolation.deIsolationPerson }} </span></span>
                    <span><label for="">解除隔离时间：</label><span> {{ timeType(Deisolation.deIsolationTime) }}
                        </span></span>
                    <span><label for="">居家监测点：</label><span> {{ Deisolation.quarantineSites }} </span></span>
                </div>
            </div>
            <div class="box">
                <span class="name">跟踪转运日志</span>
                <div class="content">
                    <div class="one" v-for="(item, index) in TrackTrans" :key="index">
                        <div class="left">
                            <span class="iconfont quan">&#xe566;</span>
                            <span class="xian"></span>
                        </div>
                        <div class="right">
                            <span>{{ timeType(item.transitTime) }}</span>
                            <span>{{ item.transitPerson + item.notes }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="img">
            <img src="./pub.svg" alt="">
            <span class="text">居家监测中</span>
        </div>
    </div>
    <div class="exit" @click="exit">
        <el-button>返回</el-button>
    </div>
</template>
  
<script lang="ts">
import { defineComponent, onBeforeMount, reactive, toRefs } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from '@/util/http'
import { parseTime } from '@/util/date'

export default defineComponent({
    name: 'DetailTrajectory',
    setup() {
        const router = useRouter();
        const route = useRoute();


        const state = reactive({
            // 转运记录
            TrackDeatil: {
                transferMode: '',
                notes: '',
                forwarderName: '',
                forwarderPhone: '',
                reportingTime: ''
            },
            // 隔离接收记录
            Receiving: {
                recipient: '',
                receivingTime: '',
                quarantineSites: '',
                notes: '',
            },
            // 采样检测记录
            Sampling: [
                {
                    prop: 'samplingDate',
                    title: '采样日期：',
                    content: ''
                },
                {
                    prop: 'specimenType',
                    title: '标本类型：',
                    content: ''
                },
                {
                    prop: 'samplingUnit',
                    title: '采样单位：',
                    content: ''
                },
                {
                    prop: 'testingUnit',
                    title: '检测单位：',
                    content: ''
                },
                {
                    prop: 'testMethod',
                    title: '检测方法：',
                    content: ''
                },
                {
                    prop: 'detectionResult',
                    title: '检查结果：',
                    content: ''
                },
                {
                    prop: 'ct',
                    title: 'CT值：',
                    content: ''
                }
            ],
            PatientSample: [] as any,
            // 解除隔离记录
            Deisolation: {
                deIsolationPerson: '',
                deIsolationTime: '',
                quarantineSites: ''
            },
            // 跟踪转运日志
            TrackTrans: [

            ] as any
        })

        // 返回
        const exit = () => {
            router.push('/ManagementOfConfidentialPersonnel')
        }

        // 转换日期格式
        const timeType = (data) => {
            if (data != '') {
                return parseTime(data, '{y}-{m}-{d}')
            } else {
                return ''
            }

        }

        onBeforeMount(async () => {
            let id = route.query.id
            // 转运记录
            await axios({
                method: 'post',
                url: 'cryptographer/selectTrack',
                params: {
                    id: id
                }
            })
                .then(res => {
                    state.TrackDeatil = res.data.data

                })
            // 隔离接收记录
            await axios({
                method: 'post',
                url: 'cryptographer/selectIsolationReceivingRecord',
                params: {
                    id: id
                }
            })
                .then(res => {
                    state.Receiving = res.data.data
                })
            // 采样检测记录
            await axios({
                method: 'post',
                url: 'cryptographer/selectPatientSample',
                params: {
                    id: id
                }
            })
                .then(res => {
                    if (res.data.data != '') {
                        res.data.data.forEach(item => {
                            state.Sampling.forEach(val => {
                                for (let key in item) {
                                    if (key == 'samplingDate') {
                                        item[key] = parseTime(item.samplingDate, '{y}-{m}-{d}')
                                    }
                                    if (val.prop == key) {
                                        val.content = item[key]
                                    }
                                }
                            })
                            state.PatientSample.push(state.Sampling)
                        })
                    }
                    state.Sampling = res.data.data
                })
            // 解除隔离记录
            await axios({
                method: 'post',
                url: 'cryptographer/selectDeisolationRecord',
                params: {
                    id: id
                }
            })
                .then(res => {
                    state.Deisolation = res.data.data
                })
            // 跟踪转运日志
            await axios({
                method: 'post',
                url: '/cryptographer/selectTrackTransshipmentLog',
                params: {
                    id: id
                }
            })
                .then(res => {
                    state.TrackTrans = res.data.data
                })
        })

        return {
            ...toRefs(state),
            exit,
            parseTime,
            timeType
        }
    }
})
</script>
  
<style scoped lang="less"> .container-box {
     box-sizing: border-box;
     width: 100%;
     padding: 50px 20px;
     background-color: white;
     display: flex;
     position: relative;
 }

 .img {
     border-width: 0px;
     position: absolute;
     right: 0px;
     top: 0px;
     width: 88px;
     height: 109px;
 }

 .text {
     color: white;
     position: absolute;
     top: 32px;
     right: -8px;
     transform: rotate(53deg);
 }

 .left {
     /* float: left; */
     display: flex;
     flex-direction: column;
     width: 45%;
     font-size: 13px;
     color: #333;
 }

 .content {
     display: flex;
     flex-direction: column;
 }

 .split {
     width: 10%;
     display: flex;
     justify-content: center;
     border-left: 1px solid rgb(203, 203, 203);
 }

 .right {
     float: left;
     width: 45%;
     font-size: 13px;
     color: #333;
 }

 label {
     box-sizing: border-box;
     height: 45px;
     display: inline-block;
     padding: 15px 10px;
 }

 label {
     font-weight: 650;
 }

 .box {
     display: flex;
     flex-direction: column;
     margin: 15px 0px;

     .content {
         margin-top: 15px;
     }
 }

 .name {
     border-left: 6px solid #02a7f0;
     padding-left: 10px;
     margin: 10px 0px;
 }

 .one {
     width: 100%;
     display: flex;

     .left {
         width: 10%;
         display: flex;
         flex-direction: column;
         align-items: center;

         // 图标
         .iconfont {
             font-size: 25px;
         }

         .quan {
             color: #939393;
             height: 25%;
         }

         .xian {
             border: 1px solid #e5e5e5;
             height: 70%;
         }
     }

     .right {
         width: 45%;
         height: 60px;
         margin-bottom: 30px;
         display: flex;
         flex-direction: column;

         span {
             margin-bottom: 10px;
         }
     }
 }

 /deep/ .backgroundColor {
     background: #333;
 }

 /* 返回按钮 */
 .exit {
     width: 100%;
     height: 100px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .el-button {
     width: 95px;
     height: 40px;
     font-size: 13px;
 }
</style>